<template>
    <div>
        <div class="head">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="礼物兑换" name="first">
                   <div class="first">
                       <div class="f-head">
                           <div>
                                <el-input v-model="input2" placeholder="会员姓名/手机号" class="a1"></el-input>
                                <button>取消</button>
                                <img src="../../images/头像.png" alt="">
                                <div>
                                    <div>
                                        <span>会员卡号:</span>{{exchange.num}}
                                        <span>会员姓名:</span>{{exchange.name}}
                                        <span>卡内余额:</span><label>{{exchange.cardBalance}}</label> 
                                    </div>
                                    <div>
                                        <span>会员等级:</span>{{exchange.level}}
                                        <span>会员积分:</span>{{exchange.integral}}
                                        <span>赠送余额:</span><label>{{exchange.giveBalancec}}</label> 
                                    </div>
                                </div>
                           </div>
                          
                       </div>
                        <div class="f-con">
                             <el-input v-model="input1" placeholder="礼物名称"></el-input>
                             <el-select v-model="value" placeholder="请选择会员等级" class="a1">
                                 <el-option v-for="item in options" :key="item.value" :label="item.label"
                                     :value="item.value">
                                 </el-option>
                             </el-select>
                             <button class="blue">搜索</button>
                            <button class="red">立即兑换</button>
                        </div>
                        <div class="f-foot">
                            <div>
                                <div> <el-checkbox v-model="checked"></el-checkbox> </div>
                                <div><el-checkbox v-model="checked"></el-checkbox>  </div>
                                <div> <el-checkbox v-model="checked"></el-checkbox> </div>
                            </div>
                        </div>
                          <div class="box">
                              <div>
                                  <input type="radio" name="1" id="">
                                  <input type="radio" name="1" id="">
                                  <input type="radio" name="1" id="">
                              </div>
                              
                          </div>
                   </div>
                </el-tab-pane>
                <el-tab-pane label="礼物领取" name="second">
                     <div class="head-h">
                        <el-input v-model="input1" placeholder="礼物名称"></el-input>
                        <el-input v-model="input2" placeholder="会员姓名/手机号" class="a1"></el-input>
                        <el-select v-model="value" placeholder="请选择会员等级" class="a1">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <button>搜索</button>
                    </div>
                    <div class="head-c">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="gift" label="礼物名称" width="180">
                            </el-table-column>
                            <el-table-column prop="num" label="数量" width="180">
                            </el-table-column>
                            <el-table-column prop="type" label="配送方式">
                            </el-table-column>
                            <el-table-column prop="name" label="兑换会员">
                            </el-table-column>
                            <el-table-column prop="level" label="会员等级">
                            </el-table-column>
                            <el-table-column prop="code" label="兑换码">
                            </el-table-column>
                            <el-table-column prop="state" label="兑换状态">
                            </el-table-column>
                            <el-table-column prop="operation" label="操作">
                            </el-table-column>
                        </el-table>
                        <el-pagination background layout="prev, pager, next" :total="50">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                checked:'',
                radio1:'1',
                radio2:'1',
                radio3:'1',
                exchange:{
                    num:'5452382',
                    name:'李林',
                    cardBalance:'￥300.00',
                    giveBalancec:'￥300.00',
                    level:'黄金会员',
                    integral:'1000'
                },

                activeName: 'first',
                input1: '',
                input2: '',
                options: [{
                    value: '选项1',
                    label: '黄金会员'
                }, {
                    value: '选项2',
                    label: '白银会员'
                }, {
                    value: '选项3',
                    label: '普通会员'
                }],
                value: '',
                tableData: [
                    {
                        gift: '艾灸套装(盒)',num: '1', type: '上门自提.', name: '张园.',level: '普通会员',code: '1526428',state: '待领取',operation: '确认兑换',
                    },
                    {
                        gift: '艾灸套装(盒)',num: '1', type: '上门自提.', name: '张园.',level: '普通会员',code: '1526428',state: '待领取',operation: '确认兑换',
                    },
                    {
                        gift: '艾灸套装(盒)',num: '1', type: '上门自提.', name: '张园.',level: '普通会员',code: '1526428',state: '待领取',operation: '确认兑换',
                    },
                    {
                        gift: '艾灸套装(盒)',num: '1', type: '上门自提.', name: '张园.',level: '普通会员',code: '1526428',state: '待领取',operation: '确认兑换',
                    },
                    {
                        gift: '艾灸套装(盒)',num: '1', type: '上门自提.', name: '张园.',level: '普通会员',code: '1526428',state: '待领取',operation: '确认兑换',
                    },
                    {
                        gift: '艾灸套装(盒)',num: '1', type: '上门自提.', name: '张园.',level: '普通会员',code: '1526428',state: '待领取',operation: '确认兑换',
                    },
                    {
                        gift: '艾灸套装(盒)',num: '1', type: '上门自提.', name: '张园.',level: '普通会员',code: '1526428',state: '待领取',operation: '确认兑换',
                    },
                    {
                        gift: '艾灸套装(盒)',num: '1', type: '上门自提.', name: '张园.',level: '普通会员',code: '1526428',state: '待领取',operation: '确认兑换',
                    },
                    
                ]
            };
        },
        methods: {
            handleClick(tab, event) {
                // console.log(tab, event);
            }
        }
    }
</script>

<style lang="scss" scoped src="../../css/gift/gift.scss"></style>